import React, { Component } from 'react';
import MyInput from '../components/MyInput';
import "./Search.scss"
import { NavBar, Space, Toast } from 'antd-mobile'
import { good_search, good_hotsearch } from '../utils/api'

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            list: [],
            list1: [],
            list2: []
        }
    }

    componentDidMount() {
        // 在页面初次渲染的时候去看本地存储中是否有值
        if (localStorage.getItem('list1') != null) {
            this.state.list1 = JSON.parse(localStorage.getItem('list1'))
            this.setState(
                this.state.list1
            )
        } else {
            this.setState(
                this.state.list = []
            )
        }

        // 热门搜索
        good_hotsearch().then((res) => {
            if (res.data.code == 200) {
                // 保存所有商品
                this.setState(
                    this.state.list2 = res.data.list
                )
            } else {
                Toast.show({
                    icon: 'fail',
                    content: '没有该类商品！',
                })
            }
        })
    }

    handleChange1 = (e) => {
        this.setState({
            name: e.target.value
        }, () => {
            // console.log(this.state.name);
            // console.log(e.target.value);
        })
    }

    back() {
        this.props.history.go(-1)
    }
    togoodinfo(id) {
        this.props.history.push({ pathname: '/goodinfo', state: { id } })
    }

    dian() {
        if (this.state.name && this.state.name != " ") {

            // 将输入框中输入的内容 保存到searchArr中
            if (this.state.list1.indexOf(this.state.name) == -1) {
                this.state.list1.push(this.state.name)
                this.setState(
                    this.state.list1
                )
            }

            // 将数组存入本地存储中
            localStorage.setItem('list1', JSON.stringify(this.state.list1));
            // 点击之后发请求拿到响应数据
            // 发请求拿到搜索数据
            good_search({ searchkey: this.state.name }).then((res) => {
                if (res.data.list != 0) {
                    // 保存所有商品
                    this.setState(
                        this.state.list = res.data.list
                    )
                } else {
                    Toast.show({
                        icon: 'fail',
                        content: '没有该类商品！',
                    })
                }
            })
        }

        this.setState(
            this.state.name = ''
        )

    }

    sou(item) {
        // 点击span中的内容进行搜索
        good_search({ searchkey: item }).then((res) => {
            if (res.data.list != 0) {
                // 保存所有商品
                this.setState(
                    this.state.list = res.data.list
                )
            } else {
                Toast.show({
                    icon: 'fail',
                    content: '没有该类商品！',
                })
            }
        })
    }

    render() {
        return (
            <div className='box'>
                <div className='head'>
                    <NavBar onBack={() => { this.back() }}>搜索</NavBar>
                    <div className="input">
                        <input type="text" placeholder='请输入商品' value={this.state.name} onChange={this.handleChange1} />
                        <span onClick={() => { this.dian() }}>搜索</span>
                    </div>
                </div>
                <>
                    {
                        this.state.list.length == 0 ?
                            <div className="lishi">
                                <div className="zuijin">
                                    <p>最近搜索</p>
                                    {
                                        this.state.list1.map((item, index) => {
                                            return (
                                                <span key={index} onClick={() => { this.sou(item) }}>{item}</span>
                                            )
                                        })
                                    }
                                </div>
                                <div className="remen">
                                    <p>热门搜索</p>
                                    {
                                        this.state.list2.map((item, index) => {
                                            return (
                                                <span key={index} onClick={() => { this.sou(item) }}>{item}</span>
                                            )
                                        })
                                    }
                                </div>
                            </div> :
                            <div className="count">
                                {
                                    this.state.list.map((item, index) => {
                                        return (
                                            <div className="item" key={index} onClick={() => { this.togoodinfo(item.id) }}>
                                                <img src={item.pic} alt="" />
                                                <div className="text">
                                                    <p>{item.name}</p>
                                                    <span className='price'>原价￥430</span>
                                                    <p className='pri'><span className='qiang'>抢购价 ￥</span>{parseInt(item.salesPrice.value)}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                    }
                </>

            </div>
        );
    }
}

export default Search;